<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Collision RectRect Test | TM Lib</title>
        
        <style>
            body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; }
            
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            #content>* {
                padding: 10px 20px;
                width: 50%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            canvas {
                box-shadow: 0px 0px 4px 0px #aaa;
            }
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script id="test-script">
            TM.loadScript("collision", "collision");
            
            /*
             * Circle Circle Test
             */
            TM.main(function()
            {
                // コンソール
                var c = TM.DebugConsole("#console");
                //var c = console; // コンソールの方に出力
                
                // コンテキスト取得
                var ctx = TM.$id("c").getContext("2d");
                
                // circle test
                c.group("【Collision RectRect test】");
                var rect0 = TM.$Rect(0, 0, 50, 50);
                var rect1 = TM.$Rect(80, 50, 50, 50);
                
                var vx = 4;
                var vy = 4;
                
                TM.setLoop(function(){
                    // canvas クリア
                    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                    
                    // 移動
                    var right  = ctx.canvas.width-rect0.width;
                    var bottom = ctx.canvas.height-rect0.height;
                    if (rect0.x < 0)        { rect0.x = 0;      vx*=-1; }
                    if (rect0.x > right)    { rect0.x = right;  vx*=-1; }
                    if (rect0.y < 0)        { rect0.y = 0;      vy*=-1; }
                    if (rect0.y > bottom)   { rect0.y = bottom; vy*=-1; }
                    rect0.moveBy(vx, vy);
                    
                    // 衝突判定
                    if (TM.Collision.testRectRect(rect0, rect1)) {
                        ctx.fillStyle = "red";
                        c.log("Hit!!");
                    }
                    else {
                        ctx.fillStyle = "black";
                    }
                    
                    // 描画
                    ctx.fillRect(rect0.x, rect0.y, rect0.width, rect0.height);
                    ctx.fillRect(rect1.x, rect1.y, rect1.width, rect1.height);
                }, 1000/30);
                
                c.groupEnd();
            });
            
        </script>
        
        <script>
            TM.addNamespace("prettify", "./../../plugins/prettify");
            TM.loadPrettify();
            
            TM.main(function(){
                TM.$id("code").innerText = TM.$id("test-script").innerText;
                prettyPrint();
            });
        </script>
    </head>
    
    <body>
         
        <h1>Collision RectRect Test | TM Lib</h1>
        
        <div id="content">
            <section>
                <h2>Canvas</h2>
                <canvas id="c"></canvas>
                <h2>Console</h2>
                <pre id="console"></pre>
            </section>
            <section>
                <h2>Code</h2>
                <pre id="code" class="prettyprint"></pre>
            </section>
        </div>
        
        
    </body>
</html>
